{% load staticfiles %}
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <link rel="stylesheet" href="{% static "/bootstrap/css/bootstrap.min.css" %}">
    <link rel="shortcut icon" href="{% static 'images/disk01.ico' %}"/>
    <style>
        body {
            background-image: url("{% static "images/filebg.jpg" %}");
            background-size: cover;
            background-position: center;
            background-color: rgba(255, 255, 255, 0);
        {#background: linear-gradient(to bottom, black, white);#}
        }
    </style>
</head>
<body>
<div class="container my-4">
    <h1 class="text-center mb-4">用户列表</h1>
    <div class="d-flex justify-content-end mb-4">
        <div>
            {% if request.session.user_name %}
                <a class="btn btn-outline-primary" href="/user/quit/">退出
                </a>
                <a href="#">{{ user_name }}</a>
            {% else %}
                <a class="btn btn-outline-primary me-2" href="/user/signin/">登录
                </a>
                <a class="btn btn-outline-primary" href="/user/signup/">注册
                </a>
            {% endif %}
        </div>
    </div>
    <!-- 用户列表 -->
    <table class="table">
        <thead>
        <tr>
            <th>ID</th>
            <th>用户</th>
            <th>邮箱</th>
            <th>电话号码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for user in user_list %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ user.user_name }}</td>
                <td>{{ user.email }}</td>
                <td>{{ user.mobile_phone }}</td>
                <td>
                    <button class="btn btn-primary edit-button">编辑</button>
                    <div class="edit-form" style="display: none;">
                        <form method="post" action="/user/update_detail/">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="update">
                            <input type="hidden" name="user_id" value="{{ user.id }}">
                            <input type="text" name="new_user_name" placeholder="新用户名">
                            <input type="text" name="new_password" placeholder="新密码">

                            <button type="submit" class="btn btn-success">保存</button>
                        </form>
                    </div>
                    {% if  identity == 1 %}
                        {% if user.is_active == 1 %}
                            <button class="btn btn-primary active-button" data-action="deactivate"
                                    data-user-id="{{ user.id }}" value="0">禁用用户
                            </button>
                        {% else %}
                            <button class="btn btn-success active-button" data-action="activate"
                                    data-user-id="{{ user.id }}" value="1">激活用户
                            </button>
                        {% endif %}
                    {% endif %}

                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="pagination row">
        <div class="m-auto">
        <span class="step-links">
            {% if page_obj.has_previous %}
                <a href="?page=1" class="btn btn-success">
                    &laquo; 1
                </a>
                <span>...</span>
                <a href="?page={{ page_obj.previous_page_number }}"
                   class="btn btn-secondary"
                >
                    {{ page_obj.previous_page_number }}
                </a>
            {% endif %}
            <span class="current btn btn-danger btn-lg">
                {{ page_obj.number }}
            </span>
            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}"
                   class="btn btn-secondary"
                >
                    {{ page_obj.next_page_number }}
                </a>
                <span>...</span>
                <a href="?page={{ page_obj.paginator.num_pages }}"
                   class="btn btn-success"
                >
                    {{ page_obj.paginator.num_pages }} &raquo;
                </a>
            {% endif %}
        </span>
        </div>
    </div>
</div>

<script src="{% static "/bootstrap/js/bootstrap.bundle.min.js" %}"></script>
<script src="{% static '/bootstrap/js/jquery-3.6.1.min.js' %}"></script>
<script>
    $(document).ready(function () {
        $(".edit-button").click(function () {
            // Find the parent row and toggle the visibility of the edit form within that row
            $(this).closest("tr").find(".edit-form").toggle();
        });
    });
</script>
<script type="text/javascript">
    var buttons = document.querySelectorAll(".active-button");

    buttons.forEach(function (button) {
        button.addEventListener("click", function () {
            var userId = button.getAttribute("data-user-id");
            var action = button.value;

            // 使用AJAX发送请求到后端视图
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/user/forbidden_or_activate/", true);
            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 处理后端的响应
                    var response = xhr.responseText;
                    console.log("后端响应: " + response);
                }
            };
            // 发送数据到后端
            xhr.send("user_id=" + userId + "&action=" + action);
        });
    });
</script>

</body>
</html>
